<script setup lang="ts">
   
    import { onMounted, ref } from 'vue'
    
    // // 分页参数
    // // 猜你喜欢的列表
    const guessList = ref(false)
    const pageParam=ref({
      page_num:"1",
      page_size:"6" 
    })
   uni.request({
    url: 'comment/matron/hot/',
    data: pageParam.value,
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    success: ({ data, statusCode, header }) => {
      console.log('mm',data.list)
      
      guessList.value=data.list
      console.log('gg',guessList.value)
    },
    fail: (error) => {}
   })
    
    </script>
    
    <template>
      <!-- 猜你喜欢 -->
      <view class="caption">
        <text class="text">妈妈好评榜</text>
      </view>
      
        <view v-if="guessList" class="guess">
        <navigator
          class="comment_box"
          v-for="item in guessList"
          :key="item.id"
          :url="`/pages/detail/detail?id=${item.id}`"

        >
         
              <view class="box_img">
				<img
              v-if="!(item.url_list.length==0)" 
            class="c_img"
            :src="item.url_list[0].url"
              mode="scaleToFill"
            />
			  </view>
          
            <uni-rate
            v-model="item.star"
            size="20"
			readonly="true"
			margin="10px"
           
            :is-fill="false"
            :margin="5"
            />
            <view class="c_text">
              {{ item.comment }} 
            </view>
        
            <view class="c_user">
            <view style="display: flex; align-items: center;flex-grow: 1;">
              <image
              :src="item.user_img"
              class="user_img"
              mode="scaleToFill"
            />
            <text class="user_name">{{item.user_name}}</text>
            </view>
            <text class="user_date">{{item.create_date}}</text>
            </view>
        
        </navigator>
      </view>
      <view class="loading-text">
        {{ true ? '没有更多数据~' : '正在加载...' }}
      </view>
      
    </template>
    
    <style lang="scss">
    :host {
      display: block;
    }
   .guess{
	column-count: 2;
	column-gap: 1px;
	column-width: 325rpx;
	grid-column-start: span;
	.comment_box{
	
	height: auto;
	margin-top: 20rpx;
	margin: 7px;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
	.box_img{
		width: 100%;	
		margin-bottom: 5px;
		.c_img{
      width: 100%;
	  height: 100%;
	object-fit: fill;
	}
	}
	.c_text{
		
		display: -webkit-box;

		margin: 5px;
		font-size: 11px;
		line-height: 14px;
		overflow: hidden;
		-webkit-box-orient: vertical;
		color: rgba(0, 0, 0, 0.6);
		/*  */
		text-overflow: ellipsis;
		-webkit-line-clamp: 4;
		letter-spacing: 0.1em;
	}
	.c_user{
		width: 100%;
		
		display: flex;
		align-items: center;
		border-top:0.5px solid rgba(0, 0, 0, 0.3);
		font-weight: 600;
		font-size: 9px;
		.user_img{
			margin: 5px;
			width: 30px;
			height: 30px;
			border-radius: 50%;

		}
		.user_name{
			font-size: 10px;
			padding-left: 3px;
			font-weight: 700;
		}
		.user_date{
			flex-grow: 1;
			text-align: right;
			font-weight: 500;
			margin: 9px;
color: rgba(0, 0, 0, 0.3);
		}
	}
}
   }
    /* 分类标题 */
    .caption {
      display: flex;
      justify-content: center;
      line-height: 1;
      padding: 36rpx 0 40rpx;
      font-size: 32rpx;
      color: #262626;
      .text {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 28rpx 0 30rpx;
    
        &::before,
        &::after {
          content: '';
          width: 20rpx;
          height: 20rpx;
          background-image: url(@/static/images/bubble.png);
          background-size: contain;
          margin: 0 10rpx;
        }
      }
    }
    
    
  /* 猜你喜欢 */


page {
background-color: #f7f7f7;
height: 100%;
display: flex;
flex-direction: column;
}

    </style>
    